import { Button, Checkbox, Form, Input, message } from 'antd'
import React from 'react'
import { useNavigate } from 'react-router-dom'
import { useDispatch } from 'react-redux'
import { userLogin } from '../store/home/homeSlice'
import { unwrapResult } from '@reduxjs/toolkit'

import '../assets/css/login.sass'

export default function Login() {
    const navigate = useNavigate()
    const dispatch = useDispatch()
    const onFinish = (values) => {
        // console.log('Success:', values);

        /*  Redux工具箱导出一个unwrapResult函数，该函数可用于提取已完成操作的有效负载，
          或抛出错误，或抛出rejectWithValue从已拒绝操作创建的有效负载（如果可用）。*/
        dispatch(userLogin({ userName: values.username, userPwd: values.password })).then(unwrapResult).then(data => {
            if (data.code === 200) {
                message.success("登录成功")
                navigate('/home')
            } else {
                message.warning("账户或密码有误")
                navigate('/login')
            }
            // console.log(data);
        }).catch(err => {
            message.error("登录出错")
        })

        // navigate('/home')
    }

    const onFinishFailed = (errorInfo) => {
        // console.log('Failed:', errorInfo);
    }

    return (
        <div className='loginWrapper'>
            <div className='login'>
                <h3>saas平台</h3>
                <div>
                    <Form
                        name="basic"
                        labelCol={{
                            span: 8,
                        }}
                        wrapperCol={{
                            span: 16,
                        }}
                        initialValues={{
                            remember: true,
                        }}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                        autoComplete="off"
                    >
                        <Form.Item
                            label="用户名"
                            name="username"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入用户名!',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="密&nbsp;&nbsp;&nbsp;码"
                            name="password"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入密码!',
                                },
                            ]}
                        >
                            <Input.Password />
                        </Form.Item>

                        <Form.Item
                            name="remember"
                            valuePropName="checked"
                            wrapperCol={{
                                offset: 8,
                                span: 16,
                            }}
                        >
                            <Checkbox>记住</Checkbox>
                        </Form.Item>

                        <Form.Item
                            wrapperCol={{
                                offset: 8,
                                span: 16,
                            }}
                        >
                            <Button type="primary" htmlType="submit">
                                登录
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
            </div>
        </div>
    )
}
